<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
    <link rel="stylesheet" href="../assets/css/ghost.min.css">

    <!-- Styles not needed for this. Just to get around various bits that Ember handles for us. -->
    <style>
    @media (max-width: 900px) {
        .settings-nav {
            top: 0;
            left: -100%;
        }
        .settings-content {
            margin-left: 0;
        }
    }
    </style>
</head>

<body class="ember-application settings settings-view-general" data-apps="false" data-filestorage="true" data-blogurl="http://127.0.0.1:2368">

    <div id="container"><a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>

        <nav class="global-nav" role="navigation">

            <a class="nav-item ghost-logo" href="/" title="/">
                <div class="nav-label"><i class="icon-ghost"></i>
                    <span>Visit blog</span>
                </div>
            </a>

            <a class="nav-item nav-content js-nav-item" href="/ghost/">
                <div class="nav-label"><i class="icon-content"></i> Content</div>
            </a>

            <a class="nav-item nav-new js-nav-item" href="/ghost/editor/">
                <div class="nav-label"><i class="icon-add"></i> New Post</div>
            </a>


            <a class="nav-item nav-settings js-nav-item active" href="/ghost/settings/">
                <div class="nav-label"><i class="icon-settings2"></i> Settings</div>
            </a>




            <div class="nav-item user-menu" data-href="#">
                <div class=" nav-label">
                    <div class="image">
                        <img src="../../../core/shared/img/user-image.png" alt="Paul Davis's profile picture">
                    </div>
                    <div class="name">
                        Paul Davis <i class="icon-chevron-down"></i>
                        <small>Profile &amp; Settings</small>
                    </div>
                </div>
            </div>

        </nav>

        <div class="nav-cover js-nav-cover"></div>

        <main id="gh-main" class="viewport" role="main" data-notification-count="0" data-bindattr-448="448">
            <aside class="notifications top">
            </aside>
            <aside class="notifications bottom">
            </aside>
            <div>
                <header class="page-header">
                    <button class="menu-button js-menu-button" data-ember-action="1221">
                        <span class="sr-only">Menu</span>
                    </button>
                    <h2 class="page-title">Settings</h2>
                </header>

                <div class="page-content">
                    <nav class="settings-nav js-settings-nav">
                        <ul>
                            <li class="settings-nav-general icon-settings"><a href="#">General</a></li>
                            <li class="settings-nav-users icon-users"><a href="#">Users</a></li>
                            <li class="settings-nav-about icon-pacman"><a href="#">About</a></li>
                            <li class="settings-nav-general icon-compass active"><a class="active" href="#">Navigation</a></li>
                        </ul>
                    </nav>


                    <section class="settings-content js-settings-content fade-in">
                        <header class="settings-view-header">
                            <a class="btn btn-default btn-back active" href="#">Back</a>
                            <h2 class="page-title">Navigation</h2>
                            <section class="page-actions">
                                <button type="button" class="btn btn-blue">Save</button>
                            </section>
                        </header>

                        <section class="content settings-navigation">
                            <form id="settings-navigation" novalidate="novalidate">

                                <div class="navigation-item">
                                    <button type="button" class="navigation-item-drag-handle icon-grab">
                                        <span class="hidden">Reorder</span>
                                    </button>
                                    <div class="navigation-inputs">
                                        <span class="navigation-item-label">
                                            <input type="text" value="Home" placeholder="Label">
                                        </span>
                                        <span class="navigation-item-url">
                                            <input type="text" value="http://my-ghost-blog.com/" placeholder="http://my-ghost-blog.com/">
                                        </span>
                                    </div>
                                    <span class="navigation-item-action">
                                        <button type="button" class="js-navigation-delete icon-trash">
                                            <span class="hidden">Delete</span>
                                        </button>
                                    </span>
                                </div>

                                <div class="navigation-item">
                                    <button type="button" class="navigation-item-drag-handle icon-grab">
                                        <span class="hidden">Reorder</span>
                                    </button>
                                    <div class="navigation-inputs">
                                        <span class="navigation-item-label">
                                            <input type="text" value="About" placeholder="Label">
                                        </span>
                                        <span class="navigation-item-url">
                                            <input type="text" value="http://my-ghost-blog.com/about" placeholder="http://my-ghost-blog.com/">
                                        </span>
                                    </div>
                                    <span class="navigation-item-action">
                                        <button type="button" class="js-navigation-delete icon-trash">
                                            <span class="hidden">Delete</span>
                                        </button>
                                    </span>
                                </div>

                                <div class="navigation-item">
                                    <button type="button" class="navigation-item-drag-handle icon-grab">
                                        <span class="hidden">Reorder</span>
                                    </button>
                                    <div class="navigation-inputs">
                                        <span class="navigation-item-label">
                                            <input type="text" placeholder="Label">
                                        </span>
                                        <span class="navigation-item-url">
                                            <input type="text" placeholder="http://my-ghost-blog.com/">
                                        </span>
                                    </div>
                                    <span class="navigation-item-action">
                                        <button type="button" class="js-add-navigation-link icon-add">
                                            <span class="hidden">Add</span>
                                        </button>
                                    </span>
                                </div>

                            </form>
                        </section>
                    </section>

                </div>
            </div>
        </main>

    </div>

</body>

</html>

<script src="../../../bower_components/jquery/dist/jquery.js"></script>
<script>
$(function() {

    $('.navigation-item').on('click', '.js-add-navigation-link', function(e){
        e.preventDefault();

        if ($('.navigation-item:last input').val() == '') {
            return;
        }

        var blank_item = $('.navigation-item:last').clone(true);
        var delete_button = $('.navigation-item:first .js-navigation-delete').clone(true);

        $('#settings-navigation').append(blank_item);
        $('.navigation-item:last input').val('');
        $('.navigation-item:last').prev('.navigation-item').find('.js-add-navigation-link').replaceWith(delete_button);
    });

    $('.navigation-item').on('click', '.js-navigation-delete', function(e){
        e.preventDefault();
        $(this).parents('.navigation-item').remove();
    });

});
</script>
